<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      v-model:form="searchParams"
      @search="handleSearch"
      labelWidth="120px"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon><Plus /></el-icon>
          添加
        </el-button>
      </template>
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListManagerResDto"
      :searchParams="searchParams"
      :serial="true"
    >
      <el-table-column prop="managerName" label="姓名" />
      <el-table-column prop="phoneNumber" label="手机号" />
      <el-table-column prop="wxId" label="微信ID" />
      <el-table-column prop="wxCode" label="微信号" />
      <el-table-column prop="portalAccount" label="门户账号" />
      <el-table-column prop="virtualNumber" label="虚拟号码" />
      <el-table-column prop="powerName" label="供电单位" width="100" />
      <el-table-column
        prop="communityDtoList"
        label="相关片区/村社"
        minWidth="170"
      >
        <template #default="scope">
          <Tooltip
            :text="
              scope.row.communityDtoList
                ?.map((e) => e.communityName)
                ?.join('、') || ''
            "
          ></Tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="wxGroupDtoList"
        label="管理微信群（请到微信群管理设置关联）"
        minWidth="160"
      >
        <template #default="scope">
          <Tooltip
            :text="
              scope.row.wxGroupDtoList?.map((e) => e.wxGroupName)?.join('、')
            "
          ></Tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="robotDtoList"
        label="服务机器人（请到微信群管理设置关联）"
        minWidth="160"
      >
        <template #default="scope">
          <Tooltip
            :text="
              scope.row.robotDtoList?.map((e) => e.managerName)?.join('、')
            "
          ></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          <Tooltip :text="scope.row.remark"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后修改时间" width="170">
        <template #header>
          <span>最后修改时间</span>
          <SortTable
            :sortTablekey="sortTablekey"
            @click="sortTablekey = 1"
            :handleSearch="handleSearch"
          ></SortTable>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >
          <el-link
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleDel(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
    ></EditForm>
  </div>
</template>

<script setup lang="ts">
import EditForm from "./EditForm.vue";
import openMsgBox from "@/hooks/messageBox.js";
import { basicConfigService } from "@/api/basicConfig";

const options = ref([]);

const formItems = ref([
  {
    name: "姓名",
    key: "managerName",
    type: "input",
  },
  {
    name: "手机号",
    key: "phoneNumber",
    type: "input",
  },
  {
    name: "微信ID",
    key: "wxId",
    type: "input",
  },
  {
    name: "微信号",
    key: "wxCode",
    type: "input",
  },
  {
    name: "门户账号",
    key: "portalAccount",
    type: "input",
  },
  {
    name: "虚拟号码",
    key: "virtualNumber",
    type: "input",
  },
  {
    name: "相关片区/村社",
    key: "communityId",
    clearable: true,
    type: "select-page",
    funName: "getAllCommunity",
    placeholder: "请选择",
    option: {
      name: "communityName",
      value: "communityId",
    },
    firstValue: "",
  },
]);
const getAllCommunity = () => {
  basicConfigService.getAllCommunity({ data: {} }).then((res) => {
    console.log(res);
    let data = res.data.content?.map((e) => {
      return {
        label: e.communityName,
        value: e.communityId,
      };
    });
    options.value.push(...data);
  });
};
const searchParams = ref({
  managerName: "",
  phoneNumber: "",
  wxId: "",
  wxCode: "",
  portalAccount: "",
  virtualNumber: "",
});
const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = { sort: undefined }, e = "") => {
  if (e != "sort") sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const item = ref({});
const visibleEditForm = ref(false);
const handleEdit = (row) => {
  item.value = { ...row };
  visibleEditForm.value = true;
};
const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return basicConfigService.manageBatchDel({ data: [row.managerId] });
    },
    () => {
      handleSearch();
    }
  );
};
onMounted(() => {
  getAllCommunity();
});
</script>

<style lang="less" scoped></style>
